<template>
    <div id="add-edit-model">
        <el-dialog
            :title="titleCon"
            v-model="initDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="60%" 
            :before-close="handleClose"
            :destroy-on-close="true"
        >
            <CommonProcessTemplate
                :tempId="tempId"
                @modelIdInfo="modelIdInfo"
                @ueseIdInfo="ueseIdInfo"
            />
            <template #footer>
                <el-button @click="cancelUseClick">取消</el-button>
                <el-button type="primary" :loading="repeatDis" :disabled="repeatDis" @click="submitForm">提交</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , computed, toRefs, watch } from 'vue';
import { ElButton, ElDialog , ElMessage } from 'element-plus';
import CommonProcessTemplate from '/@/components/workFlow/commonProcessTemplate.vue';
import { SMSJOBApplyApplySubimt } from '/@/api/centerControl/sms';
/*** 定义接口基础数据类型 */
interface formType {
    repeatDis: Boolean,
    ruleForm: ruleFormType,
}
/*** form 表单数据类型 */
type ruleFormType = {}
export default defineComponent( {
    name: 'add-edit-model',
    components: { CommonProcessTemplate },
    props: {
        initDialog:{
            type: Boolean,
            default: false,
        },
        repairInfo: {
            type: String,
            default: ''
        },
        exaUrl: {
            type: Function,
            default: () => {}
        },
        tempId: {
            type: String,
            default: ''
        }
    },
    setup(props,ctx){
        const titleCon = ref();
        let modelId = 0;
        let userId = '';

        /*** state 引用接口定义基础数据初始值 */
        const state = reactive < formType > ({
            repeatDis: false,
            ruleForm: {} as ruleFormType
        })

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            cancelUseClick();
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            ctx.emit('cancelInitClick')
        }

        const modelIdInfo = (val: any) => {
            modelId = val;
        }

        const ueseIdInfo = (val: any) => {
            if(val.value && val.value.length !== 0){
                userId = val.value;
            }
        }

        /*** submitForm 提交事件 */
        const submitForm = async() => {
            state.repeatDis = true;
            if(modelId !== 0){
                let param: any = {};
                param.id = JSON.parse(props.repairInfo).id;
                param.schemeId = modelId;
                if(userId !== '') param.nextNodeDesignates = userId;
                let exaUrl = props.exaUrl;
                try{
                    let res: any = await exaUrl(param);
                    if(res.success){
                        ctx.emit('controlInitClick');
                        ctx.emit('updateData');
                        state.repeatDis = false;
                    }else{
                        state.repeatDis = false;
                        ctx.emit('controlInitClick');
                    }
                }catch(error){ state.repeatDis = false; }
            }else{
                ElMessage({
                    type: 'warning',
                    message: '请选择流程类型',
                    duration: 1000,
                    onClose: () => {
                        state.repeatDis = false;
                    }
                })
            }
        }

        /*** 监听initDialog的变化 */
        watch(() => props.initDialog,(newVal) => {
            if(newVal){
                if(props.tempId === 'SmsJobApply') titleCon.value = '发起作业申请';
                else titleCon.value = '调整措施';
                modelId = 0;
                userId = '';
                state.repeatDis = false;
            }
        })

        /*** initDialog 响应弹窗的关闭  */
        const initDialog = computed(() => {
            return props.initDialog
        })

        return {
            handleClose,
            submitForm,
            cancelUseClick,
            titleCon,
            ...toRefs(state),
            initDialog,
            modelIdInfo,
            ueseIdInfo,
        }
    },
} )
</script>
<style scoped lang="scss">
</style>